<template>
  <div class="todo-app-wrapper">
    <h2 class="todo-title">Todo List</h2>
    <el-row class="input-group" :gutter="20">
      <el-col :span="18">
        <el-input
          type="text"
          v-model="newItem"
          placeholder="添加待办事项"
          class="todo-input"
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="addTodo">添加</el-button>
      </el-col>
    </el-row>
    <ul>
      <li v-for="(todo, index) in todos" :key="index" class="todo-item">
        <van-checkbox v-model="todo.done" class="todo-checkbox"></van-checkbox>
        <span :class="{ 'done-text': todo.done }">{{ todo.text }}</span>
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="removeTodo(index)"
          class="delete-btn"
        >
          删除
        </el-button>
      </li>
    </ul>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { ElInput, ElButton } from 'element-plus';
import { Checkbox } from 'vant';
export default {
  components: {
    ElInput,
    ElButton,
    Checkbox,
  },
  setup() {
    const newItem = ref('');
    const todos = ref([]);
    const addTodo = () => {
      if (newItem.value.trim()) {
        todos.value.push({ text: newItem.value, done: false });
        newItem.value = '';
        saveTodosToLocalStorage();
      }
    };
    const removeTodo = (index) => {
      todos.value = todos.value.filter((_, i) => i !== index);
      saveTodosToLocalStorage();
    };
    const loadTodosFromLocalStorage = () => {
      const savedTodos = localStorage.getItem('todos');
      try {
        if (savedTodos) {
          todos.value = JSON.parse(savedTodos);
        }
      } catch (error) {
        console.error('Error parsing todos from local storage:', error);
      }
    };
    const saveTodosToLocalStorage = () => {
      localStorage.setItem('todos', JSON.stringify(todos.value));
    };
    onMounted(loadTodosFromLocalStorage);
    return {
      newItem,
      todos,
      addTodo,
      removeTodo,
    };
  },
};  
</script>
<style scoped>
.todo-app-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.todo-title {
  text-align: center;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 20px;
}

.todo-input {
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.el-button {
  border-radius: 4px;
  margin-left: -0.6vw;
}

.todo-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.todo-checkbox {
  margin-right: 10px;
}

.done-text {
  text-decoration: line-through;
  color: #999;
}

.delete-btn {
  margin-left: auto;
  padding: 2px 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .input-group {
    flex-direction: column;
  }

  .input-group > * {
    width: 100%;
    margin-bottom: 10px;
  }

 
}
</style>